<template>
    <div class="box">
        <div class="pageTop">
            <span class="iconfont backHistory" @click="spotCheckView">&#xe6eb;</span>
            <span class="sellWorkOrder_header_title">{{isAdd?'添加':'编辑'}}设备财务记录</span>
            <span class="iconfont"  @click="backToHomepage" style="float:right;line-height:40px;font-size:16px;margin-right:15px;"  v-focusable>&#xe668;</span>
        </div>
        <div class="content">
            <ul class="contentUl">
                <li class="contentList">
                    <div class="contentLeft">
                        <!-- <span class="notNull">*</span> -->
                        <span class="contentLeftFont">部门</span>
                    </div>
                    <div class="contentRight" v-if="(isAdd && !orderId) || (!isAdd && !departmentId)">
                        <organization
                            class="changeDep"
                            :selectDepartment="curDepartment"
                            @department_select="departmentSelected"
                            ref="department" :style="{color:departmentIdshow ? '#fff!important' : '#6f6f77!important'}">
                        </organization>
                    </div>
                    <div class="contentRight" v-else>
                        <div class="header">
                            <div class="header-content">
                                <div class="name">{{departmentName}}</div>
                                <!-- <span class="iconfont icon1">&#xe669;</span> -->
                            </div>
                        </div>
                    </div>
                </li>
                <li class="contentList">
                    <div class="contentLeft">
                        <span class="contentLeftFont">设备名称</span>
                    </div>
                    <div class="contentRight cancelPos"  v-if="(isAdd && !orderId) || (!isAdd && !deviceId)">
                        <device :deviceId="departmentId" @getDeviceData="getDevice" ref="devices" :style="{color:deviceIdshow ? '#fff!important' : '#6f6f77!important'}"></device>
                    </div>
                    <div class="contentRight" v-else>
                        <div class="header">
                            <div class="header-content">
                                <div class="name">{{deviceName}}</div>
                                <!-- <span class="iconfont icon1">&#xe669;</span> -->
                            </div>
                        </div>
                    </div>

                </li>
                <li class="contentList">
                    <div class="contentLeft">
                        <span class="contentLeftFont">部件名称</span>
                    </div>
                    <div class="contentRight cancelPos" v-if="(isAdd && !orderId) || (!isAdd && !partsId)">
                       <parts :partsId="deviceId" @getPartsData ="getPartsData" ref="parts" :style="{color:partsIdshow ? '#fff!important' : '#6f6f77!important'}"></parts>
                    </div>
                    <div class="contentRight" v-else>
                        <div class="header">
                            <div class="header-content">
                                <div class="name">{{componentName}}</div>
                                <!-- <span class="iconfont icon1">&#xe669;</span> -->
                            </div>
                        </div>
                    </div>

                </li>
                <li class="contentList">
                    <div class="contentLeft">
                        <span class="notNull">*</span>
                        <span class="contentLeftFont">类型</span>
                    </div>
                    <div class="contentRight cancelPos">
                        <type @getPriorityData ="getPriorityData" ref="type"></type>
                    </div>
                </li>
                <li class="contentList">
                    <div class="contentLeft">
                        <!-- <span class="notNull">*</span> -->
                        <span class="contentLeftFont">关联工单</span>
                    </div>
                    <div class="contentRight cancelPos" v-if="!workOrder">
                        <order :partsId="deviceId" :componentId="partsId" @getOrderData ="getOrderData" ref="order" :style="{color:orderIdshow ? '#fff!important' : '#6f6f77!important'}"></order>
                    </div>
                    <div class="contentRight" v-else>
                        <div class="header">
                            <div class="header-content">
                                <div class="name">{{workOrder}}</div>
                                <!-- <span class="iconfont icon1">&#xe669;</span> -->
                            </div>
                        </div>
                    </div>

                </li>
                <li class="contentList">
                    <div class="contentLeft">
                        <span class="notNull">*</span>
                        <span class="contentLeftFont">实际金额</span>
                    </div>
                    <div class="contentRight cancelPos">
                    <input class="amount" type="text" @change="amountChange" v-model="actualAmount">
                    <span class="placeholder" v-if="!actualAmount">请输入实际金额</span>
                    <span v-if="actualAmount" style="color:#fff">元</span>
                    </div>
                </li>
                <li class="contentList">
                    <div class="contentLeft">
                        <!-- <span class="notNull">*</span> -->
                        <span class="contentLeftFont">备注</span>
                    </div>
                    <div class="contentRight">
                        <XTextarea  class="userQuestion" v-model="remark" :max="20"></XTextarea>
                        <span class="text-placeholder" v-if="!remark">请输入相关问题</span>
                       <!-- <textarea name="userQuestion" v-model="remark" placeholder="请输入相关问题" @input="setWords" class="userQuestion" maxlength="20" @blur="recovery"></textarea> -->
                    </div>
                </li>

                <li class="contentList">
                    <button type="button" class="subBtn" @click="cancel">取消</button>
                    <button type="button" class="subBtn" @click="submitHandle" v-if="isAdd">提交</button>
                    <button type="button" class="subBtn" @click="submitHandle" v-if="!isAdd">保存</button>
                </li>
            </ul>
        </div>

        <div class="dialog" v-if="abandonedDialogVisible">
            <div class="body">
                <div class="title">确认修改该设备财务记录？</div>
                <div class="btngroup">
                    <div class="btn1 cancel" @click="abandonedDialogVisible = false">取消</div>
                    <div class="btn2 submit" @click="submitEdit">确定</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Organization from "../common/sellWorkOrderDepartment"
import device from "../common/device"
import parts from "../common/parts"
import order from "../common/order"
import type from "../common/type"
import DeviceDao from '../../daos/device_dao'
import { XTextarea } from 'vux'
export default {
    components:{
        Organization,
        device,
        parts,
        type,
        order,
        XTextarea
    },
    data(){
        return{
            abandonedDialogVisible:false,
            departmentName:'',
            deviceName:'',
            componentName:'',
            curDepartment:{},
            listValue:0,
            departmentId:"",//部门id
            getSelectDevice:{},//获取设备
            getParts:{},//获取部件
            deviceId:"",//设备id
            partsId:0,//部件id
            type:"",//类型id
            departmentIdshow:false,
            selectPeopleIdshow:false,
            deviceIdshow:false,
            partsIdshow:false,
            orderIdshow:false,
            url:'',
            curDepartment: {
                departmentName:'全企业',
                id:0
            },
            actualAmount:"",
            remark:"",
            workOrder:"",
            financeDetail:[],
            isAdd:true,
            orderId:'',//从工单添加时

        }
    },
    watch: {
        $route(to,from){
            if(from)
            console.log(from,'from')
        },
    },
    computed: {
        recordId(){
        return this.$route.query.recordId;
      }
    },
    //返回首页的公共方法
    inject: ["backToHomepage"],
    created() {
        this.isAdd = !!+this.$route.query.isAdd
        if(this.$route.query.orderId){
            this.orderId = this.$route.query.orderId//有orderid的来自工单页面
            this.workOrder = this.$route.query.orderId
            //获取工单信息
            setTimeout(()=>{
                DeviceDao.getOrderIdDetail({thirdpartySourceId: this.orderId },res =>{
                    this.departmentId = res.departmentId
                    this.deviceId = res.deviceId
                    this.partsId = res.componentId
                    this.departmentName = res.departmentName
                    this.deviceName = res.deviceName
                    this.componentName = res.componentName
                    this.workOrder = res.thirdpartySourceId

                })
            },500)
        }
        if(!this.isAdd){
            this.getDetail();
        }
    },
    methods:{
        amountChange(v){
            this.actualAmount = Number(this.actualAmount).toFixed(2)
        },
        setWords(){

        },
        getDetail(){
              DeviceDao.getFinacialDetail({id:this.recordId},res=>{
                  let types = ["新购","维修","更换"]
                this.financeDetail = res
                this.departmentId = res.departmentId
                this.deviceId = res.deviceId
                this.partsId = res.componentId
                this.departmentName = res.departmentName
                this.deviceName = res.deviceName
                this.componentName = res.componentName
                this.actualAmount = res.actualAmount
                this.workOrder = res.thirdpartySourceId
                this.remark = res.remark
                this.type = res.type
                //回显类型
                this.$refs.type.priority= {name:types[res.type-1],id:res.type}

                // this.partsId =
            })
        },
        submitEdit(){
             let formData = {
                  actualAmount: this.actualAmount,
                  componentId: this.partsId ? this.partsId: null,//部件id
                  departmentId: this.departmentId ? this.departmentId : null,
                  deviceId: this.deviceId ? this.deviceId : null,
                  remark: this.remark,
                  thirdpartySourceId: this.workOrder,
                  type: this.type
              }

            formData.id = this.recordId
            formData.componentName = this.componentName
            formData.departmentName = this.departmentName
            formData.deviceName = this.deviceName
            DeviceDao.updateFinancialRecord(formData,res => {
                // this.getDetail();
                this.abandonedDialogVisible = false
                this.$commom.alert('保存成功')

                 if(this.orderId){
                    this.$router.push({path:"/workSheetHomePage/workOrderFinance",query:{id:this.orderId}})
                }else{
                    this.spotCheckView()
                }
                console.log(res,'sss')
            })

        },
        recovery() {
            window.scroll(0, 0);
        },
        spotCheckView(){
            history.back(-1)
        },
        // 点击完成的时候，获取部门数据
        departmentSelected: function(params) {
            if(!!params.id){
                this.curDepartment = params;
                this.departmentId = params.id;
                // 清空设备
                this.deviceId="";
                this.$refs.devices.selectdeviceData = "";

                // 清空部件
                this.partsId = "";
                this.$refs.parts.selectPartsName = "";
                // 清空工单
                if(!this.orderId){
                    this.workOrder = "";
                    this.$refs.order.selectPartsName = "";
                }
            }
            else{
                this.departmentId = this.curDepartment.id
            }
            if( this.departmentId < 0){
                this.departmentIdshow=false
            }else{
                this.departmentIdshow=true
            }
            /* this.getRecordsData();
            this.getToDealNum(); */
        },
         // 获取设备数据
        getDevice: function(data) {
            if(!!data.id){
                this.getSelectDevice = data;
                this.deviceId = data.id || null;
                 // 清空部件
                this.partsId = "";
                this.$refs.parts.selectPartsName = "";
            }
            if(data.id<0){
                this.deviceIdshow=false
            }else{
                 this.deviceIdshow=true
            }
        },
        // 获取部件的数据
        getPartsData: function(data) {
            console.log('fuck',data)
            this.componentName = data.name;
            if(!!data.id){
               this.partsId = data.id || null;
            }
            if(data.id<0){
                this.partsIdshow=false
            }else{
                 this.partsIdshow=true
            }
        },
        // 获取工单的数据
        getOrderData: function(data) {
            if(!!data){
               this.workOrder = data || null;
            }
            if(!data){
                this.orderIdshow=false
            }else{
                 this.orderIdshow=true
            }
        },
        // 获取类型
        getPriorityData(data){
            if(!!data.id){
                this.type = data.id;
            }
        },
        // 统计最近七天处理的数量
        getRecordsData: function(){
            this.spotCheckMonth = [];
            //运维工单信息
            this.$http(this.$API.getCheckRecordByMonth, {departmentId:this.departmentId}, true).then((res)=>{
                if(res){
                    for(var item of res){
                        this.spotCheckMonth.push([item.createTime, parseInt(item.count)]);
                    }
                    this.getReplaceData();
                }
            })
        },
        // 获取点巡检和更换可操作的数量
        getToDealNum: function(){
            //点巡检设备数目
            this.$http(this.$API.getCheckConfigNum, {departmentId:this.departmentId}, true).then((res)=>{
                if(res){
                    this.spotCheckNum = res.count;
                    if(res.waitcount){
                        this.replaceExecutedNum = res.waitcount;
                    }
                }
            })
            //更换设备数目
            this.$http(this.$API.getReplaceConfigCount, {departmentId:this.departmentId}, true).then((res)=>{
                if(res){
                this.replaceRecordNum = res.count;
                }
            })
        },

        getReplaceData: function(){
            this.replaceRecordMonth = [];
            this.$http(this.$API.getReplaceRecordByMonth, {departmentId:this.departmentId}, true).then((res)=>{
                if(res){
                    for(var item of res){
                        this.replaceRecordMonth.push([item.createTime, parseInt(item.count)]);
                    }
                    // this.drawLine();
                }
            })
        },
        cancel(){
            this.$router.go(-1)
        },
        submitHandle(){
            if(!this.isAdd){
                this.abandonedDialogVisible = true;
                return
            }
            if(!this.actualAmount){
                this.$commom.alert("请填写实际金额再提交！");
                return false;
            }
            if(this.type <= 0){
                this.$commom.alert("请选择类型再提交！");
                return false;
            }

            if(this.remark.length > 100){
                this.$commom.alert("备注最多可以填写100字！");
                return false;
            }
             let formData = {
                  actualAmount: this.actualAmount,
                  componentId: this.isAdd ? this.partsId : '',//部件id
                  departmentId: this.$route.query.departmentId,
                  deviceId: this.deviceId,
                  remark: this.remark,
                  thirdpartySourceId: this.workOrder,
                  type: this.type
              }

            DeviceDao.addFinancialRecord(formData,res => {
                this.$commom.alert('添加成功')
                if(this.orderId){
                    // this.$router.push({path:"/workSheetHomePage/workOrderDetails",query:{id:this.orderId}})
                    this.$router.go(-1)
                }
                console.log(res,'sss')
            })


        }

    },
}
</script>

<style lang="less" scoped>
textarea::-webkit-input-placeholder{
    color: rgb(111, 111, 119) !important;
}
   
 textarea:-moz-placeholder {
     color: rgb(111, 111, 119) !important;
}

 textarea::-moz-placeholder {
     color: rgb(111, 111, 119) !important;
}
 textarea:-ms-input-placeholder {
    color: rgb(111, 111, 119) !important;
}
    *{
        padding: 0;
        margin: 0;
        list-style: none;
        border: none;
    }
    html,body{
        width: 100%;
    }
    .box{
        width: 100%;
        height: 100vh;
        background-color: #18182c;
    }
    .backHistory{
        transform:rotate(90deg);
        -ms-transform:rotate(90deg); 	/* IE 9 */
        -moz-transform:rotate(90deg); 	/* Firefox */
        -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
        -o-transform:rotate(90deg);
        line-height:48px;
        font-size:25px !important;
        margin-left:10px;
    }
    .pageTop{
        height: 48px;
        color: #fff;
        position: fixed;
        width: 100%;
        left: 0px;
        top: 0px;
        background-color: #22233f;
        z-index: 9;
        .sellWorkOrder_header_title{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 16px;
        }
    }
    .content{
        width: 100%;
        height: 100%;
        padding: 0 15px;
        box-sizing: border-box;
        padding-top:48px;
        -webkit-overflow-scrolling: touch
    }
    .contentUl{
        width: 100%;
        height: 100%;
    }
    .contentList{
        padding: 15px 0;
        overflow: hidden;
        border-bottom: 1px solid #464656;
        touch-action: none;
    }
    .contentList:last-child{
        border: none;
        display: flex;
        margin-top: 20px;
        button{
            flex: 1
        }
    }
    .contentLeft,.contentRight{
        font-size: 16px;
    }
    .contentLeft{
        float: left;
        color: #ffffff;
    }
    .contentRight{
        position: relative;
        float: right;
        color: #8c8c96;
        box-sizing: border-box;
        margin-top: 3px;
        .text-placeholder{
            position: absolute;
            top:11px;
            left: 10px;
            font-size: 16px;
            color: #8c8c96;
            pointer-events: none;
        }
    }
    .cancelPos{
        position: relative;
        width: auto !important;
        .placeholder{
            position: absolute;
            top:0px;
            right: 0;
            font-size: 16px;
            color: #8c8c96;
            pointer-events: none;
        }
    }
    .notNull{
        color: #d81e06;
    }
    .contentList:nth-child(3) .contentRight{
        text-align: right;
    }
    .contentList:nth-child(7){
        /* border: none; */
    }
    .contentList:nth-child(7) .contentLeft + .contentRight{
       width: 100%;
       float: left;
    }
    .contentList:nth-child(7) .contentRight{
        /* margin-top: 20px; */
    }
    // .changeDep{
    //     position: absolute !important;
    //     top: 0 !important;
    //     right: 10px !important;
    // }
    .userQuestion{
        font-size: 16px;
        width: 100%;
        border-radius: 6px;
        padding: 10px;
        box-sizing: border-box;
        background-color: transparent;
        border: 1px solid #747480;
        color: #fff;
        text-align: left !important;
        /deep/textarea{
            background-color: unset!important;
        }
    }
    .userQuestion::-webkit-input-placeholder {
         color: #6f6f77;
         text-align: left;
    }
    .subBtn{
        width: 80%;
        height: 40px;
        line-height: 1;
        padding: 13px 0;
        box-sizing: border-box;
        text-align: center;
        margin: 0 auto;
        border-radius: 20px;
        background-color: #456de6;
        color: #ffffff;
        margin: 0 4%;
        font-size: 16px;
        margin-top: 0;
    }
    .amount{
        color: #fff;
        text-align: right;
        input::-webkit-input-placeholder {
        color: #8c8c96;
        }
        input::-moz-input-placeholder {
            color: #8c8c96;
        }
        input::-ms-input-placeholder {
            color: #8c8c96;
        }
    }
    .header {
    //   padding: 13px 0;
        width: 100%;
        font-size: 16px;
        line-height: 16px;
        // color:#fff;
        padding: 0 !important;
        .header-content {
            padding: 0 !important;
            width: 100%;
            display: flex;
            // align-items: center;
            justify-content: right;
            img {
            width: 5px;
            height: 11px;
            margin-left: 15px;
            }
        }
            .name{
        width: 100%;
        padding: 2px 0;
        // overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
    }
    .icon1{
        margin-left: 5px;
    }
    }
    .dialog{
  position: fixed;
  top:0;
  left: 0;
  height: 100%;
  width:100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .body{
    width: 80%;
    text-align: center;
    border-radius: 3px;
    background: #e8e9ed;
    .title{
    padding: 20px 20px 10px 20px;
      font-weight: 400;
      font-size: 16px;
      color:#333
    }
    textarea{
      width: 100%;
      border: 1px solid #ccc;
      font-size: 16px;
      padding: 10px;
    }
    .btngroup{
        text-align: center;
        width: 100%;
        height: 50px;
        font-size: 16px;
        display: flex;
        line-height: 50px;
        border-top:1px solid #dcdcdc;

    .btn1{
        border-right:1px solid #dcdcdc;
        color: #666;
        width: 49%;
    }
    .btn2{
        width: 49%;
        height: 50px;
        color:#456de6;
    }
    }
  }

}
</style>